﻿@model List<Author>
@using LiteBlog
@{
    ViewBag.Title = "Manage Authors";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section ScriptSection
{
    <script type="text/javascript">
        $(function () {
            var authors = new Authors();
            authors.loadJson(@Html.Json(Model));
            ko.applyBindings(authors, document.getElementById("main"));
        });
    </script>
}

<div id="main" class="hidden" data-bind="css: { hidden: false }">
    <h1>Authors</h1>
    <div>
        <input type="button" value="Create Author" data-bind="click: add, enable: addEnable" />
    </div>
    <div class="success" data-bind="text: successMessage">
    </div>
    <div class="error" data-bind="html: errorMessage">
    </div>
    <table class="grid">
        <thead>
            <tr>
                <th style="width: 8%">Edit</th>
                <th style="width: 8%">Delete</th>
                <th style="width: 14%">Action</th>
                <th style="width: 15%">Name</th>
                <th style="width: 15%">Display Name</th>
                <th style="width: 20%">Email</th>
                <th style="width: 20%">Url</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: collection">
            <tr data-bind="visible: !isEdit(), css: { alternateRow: !isOdd() }">
                <td style="text-align: center"><a href="#" data-bind="click: edit, visible: editEnabled">Edit</a></td>
                <td style="text-align: center"><a href="#" data-bind="click: remove, visible: editEnabled">Delete</a></td>
                <td style="text-align: center">
                    <span data-bind="visible: disableEnabled"><a href="#" data-bind="    click: disable, text: disableText"></a>
                        <br />
                    </span>
                    <span data-bind="visible: primary" style="background-color: red; color: white; font-size: .7em; font-weight: bold; padding: 3px;">PRIMARY</span>
                    <a href="#" data-bind="visible: primaryEnabled, click: makePrimary">Primary</a><br data-bind="    visible: primary() || primaryEnabled()" />
                    <a href="#" data-bind="visible: unlockEnabled, click: unlock">Unlock</a>
                    <span data-bind="visible: !unlockEnabled()">Unlocked</span><br />
                </td>

                <td data-bind="text: name"></td>
                <td data-bind="text: displayName"></td>
                <td data-bind="text: email"></td>
                <td data-bind="text: url"></td>
            </tr>
            <tr data-bind="visible: isEdit, css: { 'editRow': isEdit }">
                <td></td>
                <td></td>
                <td></td>

                <td>
                    <input type="text" name="name" data-bind="value: name, valueUpdate: 'afterkeydown', css: { 'errorBox': name.hasError }" /></td>
                <td>
                    <input type="text" name="displayName" data-bind="value: displayName, valueUpdate: 'afterkeydown', css: { 'errorBox': displayName.hasError }" /></td>
                <td>
                    <input type="text" name="email" data-bind="value: email, valueUpdate: 'afterkeydown', css: { 'errorBox': email.hasError }" /></td>
                <td>
                    <input type="text" name="url" data-bind="value: url, valueUpdate: 'afterkeydown'" />
                </td>
            </tr>
            <tr data-bind="visible: isEdit, css: { editRow: isEdit }">
                <td colspan="6"></td>
                <td style="text-align: right">
                    <a href="#" data-bind="click: update">Update</a>
                    <a href="#" data-bind="click: close">Close</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

